<template>
  <view class="wz_black fz_14">
    <view>
      <view class="lbt" style="height: 300px;">
        <up-swiper
            :list="shopDetai.image"
            :autoplay="false"
            radius="5"
            style="background-color: transparent!important;"
        ></up-swiper>
      </view>
    </view>
    <view class="pad_20 boxs" style="border-bottom: 1px solid #f0f2ee">
      <view v-if="shopDetai.shop_acts_goods" style="color:#e63946;">
        <text>￥</text>
        <text class="fz_20 em">{{ parseInt(shopDetai.shop_acts_goods.act_price) }}</text>
        <text class="em">.{{ String(shopDetai.shop_acts_goods.act_price).split('.')[1] }}</text>
        <text class="scx wz_hui mag_l-10">￥{{shopDetai.price}}</text>
      </view>
      <view v-if="!shopDetai.shop_acts_goods" style="color:#e63946;">
        <text>￥</text>
        <text class="fz_20 em">{{ parseInt(shopDetai.price) }}</text>
        <text class="em">.{{ String(shopDetai.price).split('.')[1] }}</text>
      </view>
      <view class="fz_20 em pad_10_0">
        {{ shopDetai.name }}
        <view class="u-nav-slot wz_rigdq disp mag_l-10">
          <img @click="isSc(ture)" v-if="!is_collected" class="icon_20" src="../../static/icon/qxsc.png" alt="">
          <img @click="isSc(false)" v-if="is_collected" class="icon_20" src="../../static/icon/shoucang.png" alt="">
        </view>
      </view>
      <view class="wh_f">
        <view class="flex_1 wz_hui">
          <text>月售
            {{ shopDetai?.shop_acts_goods?.stock - shopDetai?.shop_acts_goods?.last_stock }}</text>
          <text style="margin: 0 10px">库存
            {{ shopDetai?.shop_acts_goods?.last_stock }}</text>
          <text>规格
            {{ shopDetai.specs }}</text>
        </view>
<!--        <view>-->
<!--          <text @click="addGW" class="wz_white bor_25"-->
<!--                style="background-color: #3a9e5f;padding:6px 10px">+ 加入购物车</text>-->
<!--        </view>-->
      </view>
    </view>

    <view v-if="false" class="pad_0_10">
      <view class="xd">
        <img class="jd bor_5"  mode="widthFix" src="../img/pj_bg.png" style="width: 100%;left: 0;top: 0;z-index: -1"/>
        <view style="padding:30rpx 40rpx" v-if="shopTextList.length > 0">
          <view class="wh_f" style="margin-bottom:20rpx">
            <view class="flex_1 fz_16">评价 <text class="wz_hui" style="color: #afafaf">({{ total }})</text></view>
            <view @click="GoPl(shopDetai.id)" style="width: 100px;text-align: right"><img src="../../static/icon/right.png" style="width: 7px;height: 12px"/></view>
          </view>
          <view v-for="(item,index) in shopTextList" :key="index" style="margin-bottom: 20rpx">
            <view class="wh_f_r">
              <view>
                <img class="bor_255" :src="item?.wx_head?item.wx_head:'../../static/img/wdl.png'" style="width: 60rpx;height: 60rpx"/>
              </view>
              <view class="czjz_flex"><text class="mag_l-10 wz_hui fz_16">{{ item?.real_name }}</text></view>
            </view>
            <view class="ccsl_1 mag_t-5" style="color: #383838">
              <text v-if="item.comment">{{ item.comment }}</text>
              <text v-else>暂无评价内容</text>
            </view>
          </view>
        </view>
        <view style="padding:30rpx 40rpx" v-if="shopTextList.length === 0">
          <view class="wh_f" style="margin-bottom:20rpx">
            <view class="flex_1 fz_16">评价 <text class="wz_hui" style="color: #afafaf">(0)</text></view>
          </view>
          该商品暂无评价 !
        </view>
      </view>
    </view>
    <view class="pad_20 boxs">
      <view v-if="false" class="pad_10_0 fz_18">
        适用门店
      </view>
      <view v-if="false" class="pad_20_0" style="background-color: #f4f4f4">
        <text class="mag_l-20">平湖金色港湾站点 833m</text>
      </view>
      <view style="padding: 0 0 10px">
        <view class="pad_10_0 fz_16">商品详情</view>
        <view class="wh_f">
          <view class="wz_qhui" style="width: 80px;">
            品牌
          </view>
          <view class="flex_1 wz_black">
            {{ shopDetai.brand }}</view>
        </view>
        <view class="wh_f mag_t-10">
          <view class="wz_qhui" style="width: 80px;">
            规格
          </view>
          <view class="flex_1 wz_black">
            {{ shopDetai.specs }}</view>
        </view>
        <view class="wh_f mag_t-10">
          <view class="wz_qhui" style="width: 80px;">
            商品描述
          </view>
          <view class="flex_1 wz_black">
            {{ shopDetai.describe }}</view>
        </view>
<!--        <view class="wh_f mag_t-10">-->
<!--          <view class="wz_qhui" style="width: 80px;">-->
<!--            商品详情-->
<!--          </view>-->
<!--          <view class="flex_1 wz_black">-->
<!--            {{ shopDetai.detail }}</view>-->
<!--        </view>-->
        <view class="wz_qhui mag_t-10">
          【说明】:商品图片仅供参考，请以实物为准
        </view>
      </view>
      <view style="font-size: 0" v-for="(item,index) in shopDetai.image" :key="index">
        <view class="wh_max img_zfx">
          <img :src="item" alt="" style="border-radius: 0">
        </view>
      </view>

    </view>
    <view style="height: 60px"></view>
    <view v-if="shopDetai?.shop_acts_goods?.last_stock != 0" class="pm ba_white wh_max xyy czjz_flex wz_jz" style="left: 0;bottom: 0;height: 60px">
      <view class="wh_9 jz wh_f he_7">
        <view v-if="false" class="flex_3 jz_flex" style="background-color:#3a9e5f; border-radius: 20px 0 0 20px ">
          <view class="wh_f wh_max">
            <view  @click="addGWList" class="xd" style="width: 50px;border-right: 1px solid white">
              <img class="centerdq" src="../../static/icon/gwc.png" style="width: 22px;height: 22px"/>
              <view v-if="count>0" class="jd bor_20 wz_white jz_flex fz_10" style="top: -8px;right: 0;background-color:#fd5234;
              width: 18px;height: 18px">
                <text>{{ count }}</text>
              </view>
            </view>
            <view @click.stop="addGW" class="flex_1 jz_flex">
              <text class="wz_white bor_25 mag_l-5">+ 加入购物车</text>
            </view>
          </view>
        </view>
        <view @click="pay_new" class="flex_2 jz_flex" style="background-color:#e63946;color: white; border-radius:20px">
          <text class=" bor_25">立即购买</text>
        </view>
      </view>
    </view>
    <view v-if="false" style="height: 60px"></view>
    <view v-if="false" class="pm ba_white box_yy" style="width: 100%;height:60px;left: 0;bottom: 0">
      <view class="wh_f he_max">
        <view class="flex_1"></view>
        <view class="czjz_flex he_max">
          <view @click="submitOrder" class="jz_flex wz_white bor_25 mag_r-10"
                style="background-color: #3a9e5f;width: 110px;height: 40px">
            <text>去购物车结算</text>
          </view>
        </view>
      </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
    <up-popup
        :mask-closable="true"
        @close="close"
        @open="open"
        customStyle="border-radius: 20px 20px 0 0"
        :show="show"
        mode="bottom">
      <view>
        <view class="wh_f_r" style="background-color: #f5f5f5;border-radius: 20px 20px 0 0;padding:20px">
          <view style="width: 100px;">
            <view class="img_zfx">
              <img :src="additem?.image[0]"/>
            </view>
          </view>
          <view class="pad_l-20">
            <view class="wh_f_l">
              <view>{{ additem?.name }}</view>
              <view>
                <up-icon @click="close" name="close" color="#383838" size="20"></up-icon>
              </view>
            </view>
            <view class="pad_10_0 fz_12">{{ additem?.category_pstr }}</view>
            <view>
              <text class="wz_red ">¥{{ additem?.shop_acts_goods?.act_price }}</text>
              <text class="fz_12"> / {{ additem?.specs }}</text>
            </view>
          </view>
        </view>
        <view style="padding: 20px">
          <view class="wh_f_l">
            <view class="fz_14">购买数量</view>
            <view>
              <up-number-box class="centerdq" button-size="26" buttonWidth="26"
                             @change="valChange($event,additem)"
                             v-model="additem.amount"
                             :min="1"></up-number-box>
            </view>
          </view>
          <view style="padding-top: 20px">
            <view @click="killShop" class="bor_25 pad_10 wz_jz fz_14 wz_white" style="background-color:#e63946">立即团购</view>
          </view>
        </view>

      </view>
    </up-popup>
  </view>
</template>
<script>
import {
  addShoppingCart,
  collectShopGood,
  getGoodsReviews, getReviewsCount,
  getShopCartCount,
  getShopClassList,
  getShopGoodsInfo
} from "../../Api/shop";

export default {
  name: "index",
  data(){
    return{
      shopDetai: {},
      id:"",
      isList:false,
      list:{},
      is_collected:null,
      count:0,
      shopTextList:[],
      total:0,
      goods_id:null,
      act_id:null,
      show:false,
      additem:{
        image:[]
      }
    }
  },
  mounted() {
    this.getListLength()
  },
  onLoad(options){
    this.goods_id = options.id
    this.act_id = options.act_id
    getShopGoodsInfo({
      id:options.id,
      act_id:options.act_id
    }).then(res=>{
      this.shopDetai = res.data
      this.is_collected = res.data.is_collected
      console.log(res)
    })
    // 获取评论列表
    getGoodsReviews({
      goods_id:options.id,
      page:1,
      per_page:2,
    }).then(res=>{
      this.shopTextList = res.data.data
      this.total = res.data.total
      console.log('商品详情?',this.shopTextList)
    })
  },
  onShow(){
  },
  methods:{
    close(){
      this.show = false
    },
    // 团购
    killShop(e){
      let data = {
        amount:this.additem.amount,
        act_id:this.additem?.shop_acts_goods?.acts_id,
        checked:true,
        goods:this.additem,
        goods_id:this.additem.id
      }
      data.goods.price = this.additem?.shop_acts_goods?.act_price
      let list = encodeURIComponent(JSON.stringify([data]))
      uni.navigateTo({
        url:'/porder/orderPay/index?list='+list
      })
    },
    GoPl(e){
      uni.navigateTo({
        url: `/shophome/shopAppraise/index?id=${e}`
      });
    },
    addGWList(){
      uni.switchTab({
        url: '/pages/shoppingCart/index'
      });
    },
    // 获取购物车数量
    getListLength(){
      getShopCartCount().then(res => {
        this.count = res.data.count
        console.log('购物车数量',res.data.count)
      })
    },
    pay_new(){
      console.log(this.shopDetai)
      this.additem = this.shopDetai
      this.additem.amount = 1
      this.show = true
    },
    pay(e){
      let data = {
        amount:1,
        checked:true,
        goods:e,
        goods_id:e.id
      }
      let list = encodeURIComponent(JSON.stringify([data]))
      uni.navigateTo({
        url:'/porder/orderPay/index?list='+list
      })
    },
    goBack(){
      uni.navigateBack({
        delta: 1 // 返回上一页
      });
    },
    // 收藏
    isSc(e){
      if(!e){
        collectShopGood({
          goods_id:this.shopDetai.id
        }).then(res=>{
          this.is_collected =! this.is_collected
          console.log(res)
        })
      }else{
        collectShopGood({
          goods_id:this.shopDetai.id
        }).then(res=>{
          this.is_collected =! this.is_collected
          console.log(res)
        })
      }
    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2000 // 显示时间，单位毫秒
      });
      // 设置半秒后自动隐藏提示
      // setTimeout(() => {
      //   this.$refs.uToastRef.hide(); // 这里假设有一个 hide 方法来隐藏提示
      // }, 500);
    },
    addGW(){
        addShoppingCart({
          goods_id:this.shopDetai.id
        }).then(res=>{
          if(res.success){
            this.showToast('加购成功!')
            this.getListLength()
          }else{
            this.show = false
          }
        })
    },
    // 结算
    submitOrder(){
      uni.switchTab({
        url: '/pages/shoppingCart/index'
      });
    },
  },
  //1.分享微信
  onShareAppMessage() {
    return{
      title:'鲜到家族云享集市',
      path: `/shophome/shopDetail/index?id=${this.goods_id}`
    }
  },
  //2.配置分享到朋友圈
  onShareTimeline(){
    return{
      title: '鲜到家族云享集市',                //分享的标题
      query: '/shophome/shopDetail/index',     //点击分享链接之后进入的页面路径
      imageUrl: '/static/img/logo.jpg' //分享发送的链接图片地址
    }
  }
}
</script>
<style scoped lang="scss">
.lbt{
  ::v-deep.u-swiper{
    height: 300px!important;
  }
  ::v-deep.u-swiper__wrapper{
    height: 300px!important;
  }
  ::v-deep.u-swiper__wrapper__item__wrapper__image{
    height: 300px!important;
  }
}

</style>
